<template>
  <div @click="enterAuth()">
    <el-tooltip placement="top">
      <div slot="content">
        权限申请
      </div>
      <div class="icon-item">
        <img :src="logo">
      </div>
    </el-tooltip>

    <el-dialog class="dialog" width="80%" :append-to-body="true" title="权限申请" :visible.sync="dialogFormVisible">
      <el-radio-group @change="radioChange" class="radio-group" v-model="radio">
        <el-radio :label="0">查看权限</el-radio>
        <el-radio :label="1">操作权限</el-radio>
      </el-radio-group>
      <div v-if="radio == 0" class="form">        
        <div class="tabs">
          <div class="button">
            <el-button @click="submit(option)" type="primary" size="mini" round>申请权限</el-button>
          </div>
          <el-row class="boxing">
            <el-col class="flexable mar" :xs="24" :sm="24" :lg="7">
              <span class="name" style="margin-right: 5px">选择范围:</span>
              <el-select class="input" @change="changeItem" v-model="option" clearable filterable placeholder="请选择操作项">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col v-if="option == 'group'" class="flexable mar" :xs="24" :sm="24" :lg="7">
              <span class="name">事业群:</span>
              <el-select @change="change" class="input" multiple collapse-tags v-model="group" clearable filterable placeholder="请选择事业群">
                <el-option
                  v-for="item in groupList"
                  :key="item.group_id"
                  :label="item.group_name"
                  :value="item.group_id">
                </el-option>
              </el-select>
            </el-col>

            <el-col v-else-if="option == 'depart'" class="flexable mar" :xs="24" :sm="24" :lg="7">
              <span class="name">事业部:</span>
              <el-select class="input" multiple collapse-tags v-model="depart" clearable filterable placeholder="请选择事业部">
                <el-option
                  v-for="item in departsList"
                  :key="item.dept_id"
                  :label="item.dept_name"
                  :value="item.dept_id">
                </el-option>
              </el-select>
            </el-col>

            <el-col v-else-if="option == 'project'" class="flexable mar" :xs="24" :sm="24" :lg="7">
              <span class="name">项目:</span>
              <el-select class="input" multiple collapse-tags v-model="projects" clearable filterable placeholder="请选择项目">
                <el-option
                  v-for="item in projectsList"
                  :key="item.project_id"
                  :label="item.project_name"
                  :value="item.project_id">
                </el-option>
              </el-select>
            </el-col>

            <el-col style="margin-top: 10px;" class="flexable" :xs="24" :sm="24" :lg="24">
              <span class="name" style="margin-right: 5px">申请理由:</span>
              <el-input
                class="input"
                type="textarea"
                autosize
                placeholder="请输入申请理由"
                v-model="textarea">
              </el-input>
            </el-col>
          </el-row>
          <div class="title">申请记录</div>
          <VTable 
            :isShow="false"
            :border="true"             									
            :tablesize="size"
            :tablecurrent="current"
            :tabletotal="total"
            :table-data="list"
            :table-label="listLabel"
            @tableSizeChange="handleSizeChange"
            @tableCurrentImportDeptChange="handleCurrentChange"
            >
          </VTable>
        </div>
        <!--<el-tabs class="tabs" type="border-card" @tab-click="handleClick" v-model="activeName">
          <el-tab-pane label="集团" name="1">-->
            
          <!--</el-tab-pane>-->
          <!--<el-tab-pane label="事业群" name="2">
            <div class="button">
              <el-button @click="submit('group')" type="primary" size="mini" round>申请权限</el-button>
            </div>
            <el-row class="boxing">
              <el-col class="flexable mar" :xs="24" :sm="24" :lg="7">
                <span class="name">事业群:</span>
                <el-select @change="change" class="input" multiple collapse-tags v-model="group" clearable filterable placeholder="请选择事业群">
                  <el-option
                    v-for="item in groupList"
                    :key="item.group_id"
                    :label="item.group_name"
                    :value="item.group_id">
                  </el-option>
                </el-select>
              </el-col>

              <el-col class="flexable" :xs="24" :sm="24" :lg="16">
                <span class="name" style="margin-right: 5px">申请理由:</span>
                <el-input
                  class="input"
                  type="textarea"
                  autosize
                  placeholder="请输入申请理由"
                  v-model="textarea">
                </el-input>
              </el-col>
            </el-row>
     
            <div class="title">申请记录表</div>
            <VTable 
              :isShow="false"
              :border="true"             									
              :tablesize="size"
              :tablecurrent="current"
              :tabletotal="total"
              :table-data="list"
              :table-label="listLabel"
              @tableSizeChange="handleSizeChange"
              @tableCurrentImportDeptChange="handleCurrentChange"
							>
						</VTable>
          </el-tab-pane> -->
          <!--<el-tab-pane label="事业部" name="3">
            <div class="button">
              <el-button @click="submit('depart')" type="primary" size="mini" round>申请权限</el-button>
            </div>
            <el-row class="boxing">
              <el-col class="flexable mar" :xs="24" :sm="24" :lg="7">
                <span class="name">事业部:</span>
                <el-select class="input" multiple collapse-tags v-model="depart" clearable filterable placeholder="请选择事业部">
                  <el-option
                    v-for="item in departsList"
                    :key="item.dept_id"
                    :label="item.dept_name"
                    :value="item.dept_id">
                  </el-option>
                </el-select>
              </el-col>

              <el-col class="flexable" :xs="24" :sm="24" :lg="16">
                <span class="name" style="margin-right: 5px">申请理由:</span>
                <el-input
                  class="input"
                  type="textarea"
                  autosize
                  placeholder="请输入申请理由"
                  v-model="textarea">
                </el-input>
              </el-col>
            </el-row>
     
            <div class="title">申请记录表</div>
            <VTable 
              :isShow="false"
              :border="true"             									
              :tablesize="size"
              :tablecurrent="current"
              :tabletotal="total"
              :table-data="list"
              :table-label="listLabel"
              @tableSizeChange="handleSizeChange"
              @tableCurrentImportDeptChange="handleCurrentChange"
							>
						</VTable>
          </el-tab-pane>
          <el-tab-pane label="项目" name="4">
            <div class="button">
              <el-button @click="submit('project')" type="primary" size="mini" round>申请权限</el-button>
            </div>
            <el-row class="boxing">
              <el-col class="flexable mar" :xs="24" :sm="24" :lg="7">
                <span class="name">项目:</span>
                <el-select class="input" multiple collapse-tags v-model="projects" clearable filterable placeholder="请选择项目">
                  <el-option
                    v-for="item in projectsList"
                    :key="item.project_id"
                    :label="item.project_name"
                    :value="item.project_id">
                  </el-option>
                </el-select>
              </el-col>

              <el-col class="flexable" :xs="24" :sm="24" :lg="16">
                <span class="name" style="margin-right: 5px">申请理由:</span>
                <el-input
                  class="input"
                  type="textarea"
                  autosize
                  placeholder="请输入申请理由"
                  v-model="textarea">
                </el-input>
              </el-col>
            </el-row>
     
            <div class="title">申请记录表</div>
            <VTable 
              :isShow="false"
              :border="true"             									
              :tablesize="size"
              :tablecurrent="current"
              :tabletotal="total"
              :table-data="list"
              :table-label="listLabel"
              @tableSizeChange="handleSizeChange"
              @tableCurrentImportDeptChange="handleCurrentChange"
							>
						</VTable>
          </el-tab-pane>-->
        <!--</el-tabs>-->
      </div>   

      <div class="form" v-else>        
        <div class="tabs">
          <div class="button">
            <el-button @click="submit(option2)" type="primary" size="mini" round>申请权限</el-button>
          </div>
          <el-row class="boxing">
            <el-col class="flexable" :xs="24" :sm="24" :lg="7">
              <span class="name" style="margin-right: 5px">操作范围:</span>
              <el-select class="input" @change="changeItem2" v-model="option2" clearable filterable placeholder="请选择操作项">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col style="margin-top: 10px;" class="flexable" :xs="24" :sm="24" :lg="24">
              <span class="name" style="margin-right: 5px">申请理由:</span>
              <el-input
                class="input"
                type="textarea"
                autosize
                placeholder="请输入申请理由"
                v-model="textarea2">
              </el-input>
            </el-col>
          </el-row>
          <div class="title">申请记录</div>
          <VTable 
            :isShow="false"
            :border="true"             									
            :tablesize="size"
            :tablecurrent="current"
            :tabletotal="total"
            :table-data="list"
            :table-label="listLabel"
            @tableSizeChange="handleSizeChange"
            @tableCurrentImportDeptChange="handleCurrentChange"
            >
          </VTable>
        </div>
      </div>   
    </el-dialog>
  </div>
</template>

<script>
import VTable from '@/components/charts/table'
import { getHeader } from '@/app.config'
import { getEntry } from '@/api/kpi'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Auth',
  components: {
		VTable
  },
  data() {
    return {
      logo: require('../../assets/auth.png'),
      dialogFormVisible: false,      
      radio: 0,      
      current: 1,
      total: 0,
      size: 10,
      textarea: '',
      textarea2: '',
      username: '',
      list: [],
      option: '',
      option2: '',
      options: [
        {
          label: '集团',
          value: 'company'
        },
        {
          label: '事业群',
          value: 'group'
        },
        {
          label: '事业部',
          value: 'depart'
        },
        {
          label: '项目',
          value: 'project'
        }
      ],
      options2: [
        {
          label: '数据补录',
          value: 'entry_perm'
        }
      ],
      listLabel: [
        {
					label: 'LDAP账号',
					param: 'apply_user',
					align: 'center',
          width: 100
				},
        {
					label: '申请类型',
					param: 'apply_type',
					align: 'center',
          width: 80
				},
        {
					label: '申请项',
					param: 'apply_item',
					align: 'center'
				},
        {
					label: '申请理由',
					param: 'apply_reason',
					align: 'center'
				},
        {
					label: '申请状态',
					param: 'apply_status',
					align: 'center',
          width: 80,
          render: (row) => {
            if(row.apply_status == 0) {
              return '待处理'
            } else if(row.apply_status == 1) {
              return '已处理'
            } else {
              return '驳回'
            }						
					}
				},
        {
					label: '申请时间',
					param: 'apply_datetime',
					align: 'center'
				},
        {
					label: '回复信息',
					param: 'feedback_info',
					align: 'center'
				}
      ],
      groupList: [],
      departsList: [],
      projectsList: [],
      group: [],
      depart: [],
      projects: [],
      form: {}
    }
  },
  computed: {
    ...mapState({
      entry: state => state.entry
    })
  },
  mounted() {
    this.option = this.options[0].value
    this.option2 = this.options2[0].value
  },
  methods: {
    ...mapMutations([
      'setEntry'
    ]),
    change() {
      // console.log(this.group)
    },
    getStatus() {
      getEntry().then(res => {
        if (res.status == 200) {
          if (res.data.code === 200) {
            let status = res.data.entry_perm
            this.setEntry(status)
          } else if(res.data.code === 401) {
            this.$router.push('/login')
          }
        }
      })
    },
    radioChange() {
      this.current = 1
      this.textarea = ''
      this.textarea2 = ''
    },
    changeItem() {
      this.textarea = ''
      // console.log(this.option)
    },
    changeItem2() {
      this.textarea2 = ''
    },
    enterAuth() {
      this.dialogFormVisible = true
      this.getStatus()
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/apply/perm`, {headers: getHeader()})
      .then(res => {
        if (res.status == 200) {
					if (res.data.code === 200) {           
            this.groupList = res.data.groups
            this.departsList = res.data.departs
            this.projectsList = res.data.projects
            this.username = res.data.username
          }
        }
      }).catch(error => {
        console.log(error)
      })  
      this.getInfo() 
    },
    getInfo() {
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/apply/record`, {headers: getHeader()})
      .then(res => {
        if (res.status == 200) {
					if (res.data.code === 200) {
            this.list = res.data.apply_record
            this.total = this.list.length
          }
        }  
      }).catch(error => {
        console.log(error)
      })
    },
    submit(type) {
      let data = {}
      // this.dialogFormVisible = false
      data.apply_user = this.username
      data.apply_type = this.radio
      if(this.radio == 0) {
        data.apply_reason = this.textarea
      } else {
        data.apply_reason = this.textarea2
      }
      
      if(type == 'company') {
        data.apply_item = {company: ''}      
      } else if(type == 'group') {       
        if(!this.group.length) {
          this.$message({
            message: '请先选择申请项',
            type: 'error'
          })
          return
        }
        data.apply_item = {group: this.group}
      } else if(type == 'depart') {    
        if(!this.depart.length) {
          this.$message({
            message: '请先选择申请项',
            type: 'error'
          })
          return
        }
        data.apply_item = {depart: this.depart}
      } else if(type == 'project') {
        if(!this.projects.length) {
          this.$message({
            message: '请先选择申请项',
            type: 'error'
          })
          return
        }
        data.apply_item = {project: this.projects}
      } else if(type == 'entry_perm') {
        data.apply_item = {entry_perm: this.option2}
      }
      this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/apply/perm`, data, {headers: getHeader()})
      .then(res => {
        if (res.status == 200) {
					if (res.data.code === 200) {
            this.dialogFormVisible = false
            if(res.data.msg) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
            }
          } else {
            if(res.data.msg) {
              this.$message({
                message: res.data.msg,
                type: 'error'
              })
            }
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleSizeChange(val) {
      this.size = val
    },
    handleCurrentChange(val) {
      this.current = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .icon-item{
    text-align: center;
    img{
      width: 68%;
      vertical-align: middle;
    }
  }
  .dialog{
    .radio-group{
      padding-left: 20px;
    }
    .form{
      .tabs2{
        margin: 20px 20px 10px 20px;
      }
      .tabs{
        margin: 20px 20px 10px 20px;
        .button{
          text-align: right;
        }
        .title{
          margin-bottom: 13px;
          font-size: 15px;                    
        }
        .boxing{
          margin: 10px 0 20px 0;
          .mar{
            margin-right: 15px;
          }
          .flexable{
            display: flex;
            flex-wrap: nowrap;
            .name {
              width: 60px;
              margin: auto;           
            }
            .input{
              flex: 1;
              margin: auto;
            }
          }
        }
      }
    }
  }
</style>